<template>
  <div class="model-table">
    <img :src="imgUrl" width="150px" style="margin-right: 10px;" :alt="alt" @click="lookImg">
  </div>
</template>

<script>
import { COSName, Region } from '@/utils/env'
export default {
  name: 'COSImg',
  props: {
    url: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      dafault: ''
    },
    cos: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      imgUrl: ''
    }
  },
  created () {
    this.COSImgUrl(this.url)
  },
  methods: {
    lookImg () {
      this.$emit('look', this.imgUrl)
    },
    COSImgUrl (url) {
      const self = this
      if (url.indexOf('http') === 0) {
        this.imgUrl = url
        return
      }
      this.cos.getObjectUrl({
        Bucket: COSName,
        Region: Region,
        Key: url,
        Sign: true
      }, function (err, data) {
        if (err) return
        self.imgUrl = data.Url
      })
    }
  },
  watch: {
    url: function (newV, oldV) {
      this.COSImgUrl(newV)
    }
  }
}
</script>
